<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册 - 智能教育系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            margin: 0;
            padding-top: 80px;
        }

        .register-container {
            max-width: 400px;
            margin: 2rem auto;
            padding: 2rem;
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            transform: translateY(0);
            transition: transform 0.3s ease;
        }

        .register-container:hover {
            transform: translateY(-5px);
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-control {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            border-color: #6e8efb;
            box-shadow: 0 0 0 3px rgba(110,142,251,0.2);
            outline: none;
        }

        .btn-primary {
            width: 100%;
            padding: 0.75rem;
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            color: white;
            border: none;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(110,142,251,0.4);
        }

        .alert {
            padding: 1rem;
            border-radius: 10px;
            margin-bottom: 1rem;
            animation: slideIn 0.3s ease;
        }

        .alert-danger {
            background: #fee2e2;
            color: #dc2626;
            border: 1px solid #fecaca;
        }

        .alert-success {
            background: #dcfce7;
            color: #16a34a;
            border: 1px solid #bbf7d0;
        }

        @keyframes slideIn {
            from {
                transform: translateY(-10px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .password-strength {
            height: 4px;
            margin-top: 0.5rem;
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        .strength-weak { background: #ef4444; width: 33%; }
        .strength-medium { background: #f59e0b; width: 66%; }
        .strength-strong { background: #10b981; width: 100%; }
    </style>
</head>
<body>
    <!-- 粒子背景 -->
    <div id="particles-js" class="particles"></div>

    <div class="register-container">
        <h2 class="text-2xl font-bold text-center mb-6">创建账号</h2>
        
        <!-- 错误消息 -->
        <div th:if="${error}" class="alert alert-danger" th:text="${error}"></div>
        
        <!-- 成功消息 -->
        <div th:if="${success}" class="alert alert-success" th:text="${success}"></div>

        <form th:action="@{/simple-register}" method="post" id="registerForm">
            <div class="form-group">
                <label class="block text-gray-700 mb-2">用户名</label>
                <input type="text" name="username" class="form-control" required>
            </div>
            
            <div class="form-group">
                <label class="block text-gray-700 mb-2">邮箱</label>
                <input type="email" name="email" class="form-control" required>
            </div>
            
            <div class="form-group">
                <label class="block text-gray-700 mb-2">密码</label>
                <input type="password" name="password" class="form-control" required id="password">
                <div class="password-strength" id="passwordStrength"></div>
            </div>
            
            <div class="form-group">
                <label class="block text-gray-700 mb-2">确认密码</label>
                <input type="password" name="confirmPassword" class="form-control" required>
            </div>
            
            <div class="form-group">
                <label class="block text-gray-700 mb-2">选择角色</label>
                <select name="role" class="form-control" required>
                    <option value="STUDENT">学生</option>
                    <option value="TEACHER">教师</option>
                </select>
            </div>
            
            <button type="submit" class="btn-primary">注册</button>
        </form>
        
        <div class="text-center mt-4">
            <p class="text-gray-600">已有账号？ <a href="/simple-login" class="text-blue-600 hover:text-blue-800">立即登录</a></p>
        </div>
    </div>

    <!-- 引入粒子效果 -->
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script>
        // 粒子效果配置
        particlesJS('particles-js', {
            particles: {
                number: {
                    value: 80,
                    density: {
                        enable: true,
                        value_area: 800
                    }
                },
                color: {
                    value: '#6e8efb'
                },
                shape: {
                    type: 'circle'
                },
                opacity: {
                    value: 0.5,
                    random: false
                },
                size: {
                    value: 3,
                    random: true
                },
                line_linked: {
                    enable: true,
                    distance: 150,
                    color: '#6e8efb',
                    opacity: 0.4,
                    width: 1
                },
                move: {
                    enable: true,
                    speed: 2,
                    direction: 'none',
                    random: false,
                    straight: false,
                    out_mode: 'out',
                    bounce: false
                }
            },
            interactivity: {
                detect_on: 'canvas',
                events: {
                    onhover: {
                        enable: true,
                        mode: 'grab'
                    },
                    onclick: {
                        enable: true,
                        mode: 'push'
                    },
                    resize: true
                }
            },
            retina_detect: true
        });

        // 密码强度检测
        const passwordInput = document.getElementById('password');
        const strengthIndicator = document.getElementById('passwordStrength');

        passwordInput.addEventListener('input', function() {
            const password = this.value;
            let strength = 0;
            
            if (password.length >= 8) strength++;
            if (password.match(/[a-z]/) && password.match(/[A-Z]/)) strength++;
            if (password.match(/\d/) && password.match(/[^a-zA-Z\d]/)) strength++;
            
            strengthIndicator.className = 'password-strength';
            if (strength === 1) {
                strengthIndicator.classList.add('strength-weak');
            } else if (strength === 2) {
                strengthIndicator.classList.add('strength-medium');
            } else if (strength === 3) {
                strengthIndicator.classList.add('strength-strong');
            }
        });

        // 表单提交动画
        document.getElementById('registerForm').addEventListener('submit', function(e) {
            const btn = this.querySelector('button[type="submit"]');
            btn.disabled = true;
            btn.innerHTML = '<span class="inline-block animate-spin mr-2">⟳</span> 注册中...';
        });
    </script>
</body>
</html> 